<template>
  <div class="mine">
    <div class="head">
      <image
        class="head-bg"
        src="@/static/images/mine/head-bg.svg"
        mode="aspectFill"
      ></image>
      <uni-nav-bar
        class="nav-bar"
        title="个人中心"
        statusBar="true"
        :border="false"
        backgroundColor="#00000000"
        color="#ffffff"
      ></uni-nav-bar>
      <div class="profile" @click="profileClickHandle">
        <image
          class="avatar"
          :src="userInfo.avatar || '/static/images/common/default-avatar.svg'"
          mode="aspectFill"
        ></image>
        <text class="to-login">{{ userInfo.name || '立即登录' }}</text>
        <image
          class="right-arrow"
          src="/static/icons/common/right-arrow-white.svg"
        ></image>
      </div>


    </div>
    <div class="menu first">
      <button
        class="menu-item my-wedding-question"
        @click="navigateTo('my-survey')"
      >
        <span class="menu-item-title">我的婚礼问卷</span>
        <span class="menu-item-right" v-show="unreadQuestionnaireCount > 0"
          >收到{{ unreadQuestionnaireCount }}封问卷</span
        >
        <image
          class="menu-right-arrow"
          src="/static/icons/common/right-arrow-gray.svg"
        />
      </button>

    </div>
    <div class="menu second">
      <button
        class="menu-item"
        v-for="item in MINE_MENU_LIST_2"
        :key="item.id"
        :open-type="item.actionType === 'opentype' ? item.openType : ''"
        @click="menuItemClickHandle(item)"
      >
        <span class="menu-item-title">{{ item.title }}</span>
        <span class="menu-item-right" v-if="item.rightText">{{
          item.rightText
        }}</span>
        <image
          class="menu-right-arrow"
          :src="item.rightIcon || '/static/icons/common/right-arrow-gray.svg'"
        />
      </button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useUser } from '@/stores/user-store';
import { navigateTo } from '@/utils/navigate';
import { storeToRefs } from 'pinia';

import {
  MINE_MENU_LIST_2,
} from '@/static/constants/view-constants';
import { useQuestionnaireList } from '@/stores/questionnaire-list';
import { onShow, onShareAppMessage } from '@dcloudio/uni-app';
import useApp from '@/stores/app';

const questionnaireListStore = useQuestionnaireList();
const { unreadQuestionnaireCount } = storeToRefs(questionnaireListStore);

const userStore = useUser();
const { userInfo } = storeToRefs(userStore);
const { checkUserInfo, getUserInfo } = userStore;

const appStore = useApp();
const { isReloadUserInfo } = storeToRefs(appStore);
const { uploadReloadUserInfo } = appStore;


onShow(() => {
  if (isReloadUserInfo.value) {
    getUserInfo();
    uploadReloadUserInfo(false);
  }
});


// 点击个人资料
const profileClickHandle = () => {
  // 如果已登录，跳转到编辑个人资料页面
  if (checkUserInfo()) {
    navigateTo('edit-profile');
  }
};

/**
 * 菜单项点击事件
 * @param item 菜单项
 */
const menuItemClickHandle = (item: MenuItem) => {
  // 如果actionType是navigate，跳转到对应页面
  if (item.actionType === 'navigate' && item.url && checkUserInfo()) {
    navigateTo(item.url);
  }
};


/**
 * 分享逻辑
 */
onShareAppMessage(() => {
  return {
    path: `pages/lines?invitorId=${userInfo.value.id}`,
    title: 'AI台词助手、婚礼问卷，您的主持好帮手，快来查看吧',
    imageUrl:
      'https://ustatic.hudongmiao.com/%20miao/survey/questionaireShareImg.png',
  };
});
</script>

<style lang="scss" scoped>
.mine {
  height: 100%;
  min-height: 100vh;
  background-color: #f2f8f3;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  .head {
    width: 100vw;
    height: 66.5385vw;
    background-size: 100%;

    display: grid;
    grid-template:
      'nav-bar' auto
      '.' 13.4px
      'profile' 16.4103vw
      '.' 1fr;

    position: relative;

    // 背景
    .head-bg {
      position: absolute;
      top: 0;
      left: 0;
      // z-index: -1;

      width: 100vw;
      height: 100%;
    }

    // 导航栏
    .nav-bar {
      grid-area: nav-bar;
    }

    // 个人资料
    .profile {
      grid-area: profile;
      z-index: 1;

      display: grid;
      grid-template:
        '. avatar to-login arrow .' 16.4103vw
        /30px 16.4103vw 1fr 6.1538vw 16px;

      // 头像
      .avatar {
        grid-area: avatar;
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }

      // 「立即登录」
      .to-login {
        grid-area: to-login;
        align-self: center;
        padding-left: 24px;

        font-size: 4.359vw;
        color: #fff;
      }

      // 「>」
      .right-arrow {
        grid-area: arrow;
        width: 100%;
        height: 100%;
      }
    }


  }

  // 菜单
  .menu {
    margin-top: 31.93rpx;
    align-self: center;

    width: 91.7949vw;
    border: 12px;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;

    // 菜单项共用样式
    .menu-item {
      width: 91.7949vw;
      height: 13.8462vw;
      background: #ffffff;

      padding-left: 16px;
      display: grid;
      grid-template:
        'title right icon' 1fr
        / 1fr auto 6vw;
      align-items: center;

      .menu-item-title {
        grid-area: title;
        justify-self: start;

        font-size: 28.85rpx;
        color: #333333;
      }

      .menu-item-right {
        grid-area: right;
        justify-self: end;
        padding-right: 10px;
        font-size: 3.3333vw;
        color: #8d8d8d;
      }

      .menu-right-arrow {
        width: 4.1026vw;
        height: 4.1026vw;
        grid-area: icon;
        display: flex;
        align-items: center;
      }
    }
  }


}
</style>
